<template>
	<view class="details">
		<xbd-pages-content :title="title">
			<template #content>
				<view class="content" :style="'minHeight:'+windowHeight+'px'">
					<view class="content_type"  v-if="type !== '0'">
					<view class="box">
						<view class="">
							<text>就餐日期</text>
						</view>
						<view class="box_right date" v-if=" fromDate.ticket_type !== 'self'">
							<text>{{fromDate.start_time | timeFormat('YYYY-MM-DD')}}</text>
							<text>至</text>
							<text>{{fromDate.end_time | timeFormat('YYYY-MM-DD')}}</text>
						</view>
						<view v-else class="box_right">
							<text>{{fromDate.end_time | timeFormat('YYYY-MM-DD')}}</text>
						</view>
						<view class="icon">
							<image v-if="fromDate.ticket_state==='passed'" src="../../../static/images/meal/yes.svg" mode=""></image>
							<image v-else-if="fromDate.ticket_state==='wait'" src="../../../static/images/meal/stay.svg" mode="">
							</image>
							<image v-else-if="fromDate.ticket_state==='refused'" src="../../../static/images/meal/no.svg" mode="">
							</image>
							<image v-else-if="fromDate.ticket_state==='pending'" src="../../../static/images/meal/underway.png" mode="">
							</image>
						</view>
					</view>
					<view class="box" v-if=" fromDate.ticket_type === 'self'">
						<view class="">
							<text>就餐时段</text>
						</view>
						<view class="box_right">
							<text v-if="fromDate.date_type === '0'">早</text>
							<text v-else-if="fromDate.date_type==='1'">中</text>
							<text v-else-if="fromDate.date_type==='2'">晚</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>申请理由</text>
						</view>
						<view class="box_right">
							<view class="reason">{{fromDate.reason}}</view>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text>用餐人数</text>
						</view>
						<view class="box_right">
							<text>{{fromDate.person_count}}</text>
						</view>
					</view>
					<view class="box" v-if=" fromDate.ticket_type !== 'normal'">
						<view class="">
							<text>人均金额</text>
						</view>
						<view class="money">
							<text>{{fromDate.average}}</text>
							<text class="tag">元/人</text>
						</view>
					</view>
					<view v-if=" fromDate.ticket_type === 'normal'">
						<view class="number">
							申请餐券数量：
						</view>
						<view class="box">
							<view class="">
								<text>早餐</text>
							</view>
							<view class="box_right">
								<text>{{fromDate.breakfast_count}}张</text>
								<text class="tag">注：10元/张</text>
							</view>
						</view>
						<view class="box">
							<view class="">
								<text>午餐</text>
							</view>
							<view class="box_right">
								<text>{{fromDate.lunch_count}}张</text>
								<text class="tag">注：30元/张</text>
							</view>
						</view>
						<view class="box">
							<view class="">
								<text>晚餐</text>
							</view>
							<view class="box_right">
								<text>{{fromDate.dinner_count}}张</text>
								<text class="tag">注：20元/张</text>
							</view>
						</view>
					</view>
					</view>
					<view class="foot" v-if="type === '2' ">
						<view class="btns">
							<button class="draft" @click="draft">拒绝审批</button>
							<button class="upload" @click="pass">审批通过</button>
						</view>
					</view>
					<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'>
						<template>
							<view class="draft_reason">
								<text>拒绝审批</text>
								<uni-easyinput class="textarea" type="textarea" v-model="draftResone"
									placeholder="请输入拒绝原因：" :maxlength="30"></uni-easyinput>
								<!-- #ifdef APP-PLUS || H5 -->
								<view class="mit">
									字数限制：30字
								</view>
								<!-- #endif -->
							</view>
						</template>
					</xbd-popup>
					
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		Meal
	} from '@/api/index.js';
	export default {
		data() {

			return {
				windowHeight:0,
				flag:true,
				id:'',
				type:'0',  //接收页面跳转过来的值  判断下button的类型
				showDialog: false,
				islender: true,
				draftResone:'',
				title:'',
				fromDate: {
				},
				info: {
					id: '',
					state: "",
					reason: ""
				},
				requer:{
					id:'',
					ticket_type:'0',
				},
				option: {  //传参控制页面审批提示
					title:"我的审批",
					pass:true,
					msg:""
				},
				department:[],
			}
		},
		methods: {
			dialogConfirm() {
				//弹出框确认操作
				if (this.draftResone.length) {
					this.showDialog = false;
					this.option.msg = "审批拒绝"
					this.option.pass = false
					this.refus()
				} else {
					this.$showToast('请输入拒绝理由');
				}
			},
			dialogCancel() {
				this.draftResone = ''
				this.showDialog = false;
			},
			
			draft() {
				this.showDialog = true;
			},
						 
			pass() {
				this.option.msg = "审批通过"
				this.passed()
			},
			// 初始化表单
			async init() {
				try {
					this.$showLoading('加载中');
					const res = await Meal.getDetails(this.requer);
					uni.hideLoading();
					this.fromDate = res.data.data;
					
				} catch (e) {
					uni.hideLoading();
				}
			},
			// 拒绝申请
			async refus() {
				this.info.state = 'refused'
				this.info.reason = this.draftResone
				if (this.flag) {
				try {
					this.flag = false
					this.$showLoading('加载中');
					const res = await Meal.putApproval(this.info);
					uni.hideLoading();
					if (res.success) {
						if(res.code===9527){
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
							uni.navigateBack({
								delta: 1
							});
						}else{
							uni.redirectTo({
								url: `../../status/status?option=${JSON.stringify(this.option)}`
							});
						}
					} else {
						this.flag = true
						this.$showToast(res.msg);
					}
				} catch (e) {
					uni.hideLoading();
				}
				}
			},
			// 审批通过
			async passed() {
				this.info.state = 'pass'
				if (this.flag) {
				try {
					this.flag = false
					this.$showLoading('加载中');
					const res = await Meal.putApproval(this.info);
					uni.hideLoading();
					if (res.success) {
						if(res.code===9527){
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
							uni.navigateBack({
								delta: 1
							});
						}else{
							uni.redirectTo({
								url: `../../status/status?option=${JSON.stringify(this.option)}`
							});
						}
			
					} else {
						this.flag = true
						this.$showToast(res.msg);
					}
				} catch (e) {
					this.flag = true
					uni.hideLoading();
				}
				}
			},
			
			
		},
		async onLoad(res){
			this.type =res.type
			this.id = res.id
			this.info.id = res.id
			this.requer.id = res.id
			await this.init()
			uni.getSystemInfo({
				     success:(res2) =>{
						 this.windowHeight = res2.windowHeight
				     }
				 });
			if(this.fromDate.ticket_type=== 'normal' ){
				this.title = '普通用餐餐券'
			}else if(this.fromDate.ticket_type === 'self'){
				this.title = '自助用餐餐券'
			}else if(this.fromDate.ticket_type === 'table'){
				this.title = '桌餐用餐餐券'
			}
			uni.setNavigationBarTitle({
			    title: this.title
			});
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .draft:after {
		border: none;
	}

	.content {
		box-sizing: border-box;
		padding: 0 40rpx;
		font-size: 32rpx;
		background-color: #FFFFFF;
		.content_type{
			padding: 40rpx 0;
		}
		.box {
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30px;

			.box_right {
				font-size: 28rpx;
				width: 420rpx;
				
				display: flex;
				justify-content: space-between;
					
				.reason{
					width: 420rpx;
					text-align: left;
					word-wrap: break-word;
				}
				
			}

			.money {
				width: 420rpx;
				font-size: 28rpx;

				.tag {
					color: #999999;
					margin-left: 20rpx;
				}
			}

			.date {
				box-sizing: border-box;
				// padding-right: 100rpx;
			}

			.icon {
				position: absolute;
				top: -10px;
				right: 0;

				image {
					width: 150rpx;
					height: 150rpx;
				}

			}
		}

		.number {
			font-size: 28rpx;
			color: #999999;
			margin-bottom: 30px;

		}

		.tag {
			font-size: 28rpx;
			color: #999999;
		}

		.line {
			border-bottom: 1px solid #eaeaea;
			margin-bottom: 15px;
		}

		.title {
			font-size: 32rpx;
			color: #194769;
			font-weight: 900;
			margin-bottom: 20px;
		}
		.flow {
			.type:last-child {
				.line2 {
					height: 0 !important;
				}
			}
		}

		.type {
			position: relative;
			display: flex;

			.radio {
				width: 20rpx;
				height: 20rpx;
				background-color: #FAC52A;
				border-radius: 10rpx;
			}

			.line2 {
				width: 2rpx;
				height: 100rpx;
				background-color: #FAC52A;
				margin-left: 9rpx;
			}

			.msg {
				.reason {
					margin-top: 20px;
					margin-left: 20rpx;
					color: #999999;
				}
			}

			.msg_box {
				display: flex;
				justify-content: space-between;
				position: absolute;
				width: 610rpx;
				top: -5px;
				left: 40rpx;
				display: flex;
				color: #999999;

				.msg_tag {
					display: flex;

					.name {
						margin-right: 20rpx;
						

						.people {
							font-size: 30rpx;
							color: #194769;
						}
						
					}

					.no {
						color: #FF7543;
					}

					.yes {
						color: #39D4D1;
					}

				}

				.date {
					font-size: 28rpx;
						
					.date_text{
						margin-left: 20rpx;
					}
				}
			}

		}

		.foot {
			box-sizing: border-box;
			padding: 20upx 4upx;
			margin-bottom: 20px;
			margin-top: 30px;

			.btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 300rpx;
					height: 30px;
					line-height: 30px;
					font-size: 32rpx;
					box-sizing: border-box;
				}

				.draft {
					color: #FFFFFF;
					margin-right: 50rpx;
					background:url(../../../static/images/meal/gary.png) no-repeat;
					background-size: 100% 100%;
				}

				.upload {
					background: url(../../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
				}

				.revocation {
					background: url(../../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
					margin-left: 180rpx;
				}
			}
		}
			
		.pictureBox{
			width: 750rpx;
			padding: 30px 40rpx;
			box-sizing: border-box;
			margin-left: -40rpx;
			background-color: #F8F8F8;
		}
		.QrCode{
			box-sizing: border-box;
			border: 2rpx solid #BBBBBB;
			padding: 40rpx 30rpx;
			background-color: #FFFFFF;
			margin-bottom: 60rpx;
			.QrCode_box{
				display: flex;
				flex-direction: column;
				margin-top: 60rpx;
				margin-bottom: 60rpx;
				.img{
					margin-left: 106rpx;
					width: 420rpx;
					height: 420rpx;
				}
			}
			
			.Qr_foot{
				display: flex;
				margin-top: 30rpx;
				font-size: 28rpx;
				.Qr_tag{
					width: 200rpx;
					text-align: right;
					margin-right: 40rpx;
					color: #194769;
				}
				.Qr_type{
					width: 460rpx;
					
				}
			}
		}
	}
	.draft_reason{
		position: relative;
		.textarea{
			box-sizing: border-box;
			margin:10px 30rpx 10px 30rpx;
			width: 440rpx;
			text-align: left;
			font-size: 28rpx;
		}
		.mit{
			position: absolute;
			bottom: 6px;
			right: 40rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

</style>
